﻿<!DOCTYPE html>
<html>
<head>
    <style>
        body, html { margin: 0; padding: 0; }
        canvas { position: fixed; width: 100%; height: 100%; }
    </style>
    <script src="pixi.js"></script>
    <script src="../bin/pixi-ui.js"></script>
    <title></title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
    <meta charset="utf-8" />
</head>
<body>
    <script type="text/javascript">
        //PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
        var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);
        var stage = new PIXI.Container();
        var uiStage = new PIXI.UI.Stage(window.innerWidth, window.innerHeight);
        var dragContainer = new PIXI.UI.Container();
        document.body.appendChild(renderer.view);
        stage.addChild(uiStage);

        window.addEventListener("resize", function () {
            resize();
        });

        var resize = function () {
            renderer.resize(window.innerWidth * devicePixelRatio, window.innerHeight * devicePixelRatio);
            uiStage.resize(window.innerWidth * devicePixelRatio, window.innerHeight * devicePixelRatio);
        }

        resize();
        PIXI.loader.add('UISprites.json').load(function () {
            init();
        });

        var playersArr = [
            { name: "Alex", score: 1000, kills: 15, deaths: 4, assist: 6, ping: 75 },
            { name: "John", score: 132, kills: 1, deaths: 2, assist: 1, ping: 25 },
            { name: "Charles", score: 595, kills: 9, deaths: 6, assist: 4, ping: 50 },
            { name: "Ivan", score: 705, kills: 10, deaths: 5, assist: 3, ping: 33 },
            { name: "Martin", score: 130, kills: 2, deaths: 7, assist: 7, ping: 21 },
            { name: "Ronnie", score: 10, kills: 0, deaths: 1, assist: 1, ping: 55 },
            { name: "Jimmy", score: 1500, kills: 17, deaths: 1, assist: 8, ping: 55 },
            { name: "Egon", score: 1132, kills: 5, deaths: 3, assist: 5, ping: 25 },
            { name: "Ulrik", score: 595, kills: 9, deaths: 8, assist: 4, ping: 58 },
            { name: "Peter", score: 705, kills: 10, deaths: 3, assist: 4, ping: 33 },
            { name: "Nick", score: 1130, kills: 15, deaths: 5, assist: 3, ping: 247 },
            { name: "Andy", score: 17, kills: 0, deaths: 2, assist: 2, ping: 59 },

            { name: "Alex", score: 1000, kills: 15, deaths: 4, assist: 6, ping: 75 },
            { name: "John", score: 132, kills: 1, deaths: 2, assist: 1, ping: 25 },
            { name: "Charles", score: 595, kills: 9, deaths: 6, assist: 4, ping: 50 },
            { name: "Ivan", score: 705, kills: 10, deaths: 5, assist: 3, ping: 33 },
            { name: "Martin", score: 130, kills: 2, deaths: 7, assist: 7, ping: 21 },
            { name: "Ronnie", score: 10, kills: 0, deaths: 1, assist: 1, ping: 55 },
            { name: "Jimmy", score: 1500, kills: 17, deaths: 1, assist: 8, ping: 55 },
            { name: "Egon", score: 1132, kills: 5, deaths: 3, assist: 5, ping: 25 },
            { name: "Ulrik", score: 595, kills: 9, deaths: 8, assist: 4, ping: 58 },
            { name: "Peter", score: 705, kills: 10, deaths: 3, assist: 4, ping: 33 },
            { name: "Nick", score: 1130, kills: 15, deaths: 5, assist: 3, ping: 247 },
            { name: "Andy", score: 17, kills: 0, deaths: 2, assist: 2, ping: 59 },

        ];



        function init() {
            var whiteBG = PIXI.Texture.fromFrame("UI/ui-box-1.png");
            var innerBG = PIXI.Texture.fromFrame("UI/ui-box-2.png");
            var lineSprite = PIXI.Texture.fromFrame("UI/ui-horizontal-line-border.png");
            var horizontalGradient = PIXI.Texture.fromFrame("UI/horizontal-gradient.png");
            var solidBox = PIXI.Texture.fromFrame("UI/solid-box.png");
            var hlTextStyle = { fill: ['#ffffff', '#ededed'], fontSize: 18, fontFamily: 'Calibri', fontWeight: 'bold' };
            var sliderTextStyle = { fill: ['#ffffff', '#ededed'], fontSize: 18, fontFamily: 'Calibri', fontWeight: 'bold' };

            wrapper = new PIXI.UI.Container();
            wrapper.verticalAlign = "middle";
            wrapper.horizontalAlign = "center";
            wrapper.height = "90%";
            wrapper.width = "96%";
            wrapper.minWidth = 900;
            uiStage.addChild(wrapper);


            sliderContainer = new PIXI.UI.Container("20%", "100%");
            wrapper.addChild(sliderContainer);


            //basic slider
            TextSlider = new PIXI.UI.Text("Basic Slider", sliderTextStyle);
            TextSlider.top = 0;
            sliderContainer.addChild(TextSlider);


            slider = new PIXI.UI.Slider({
                track: new PIXI.UI.SliceSprite(whiteBG, 7),
                handle: new PIXI.UI.SliceSprite(solidBox, 7),
                value: 50,
                minValue: 0,
                maxValue: 100
            });
            slider.top = 50;
            sliderContainer.addChild(slider);


            TextSlider2 = new PIXI.UI.Text("With styling and callback", sliderTextStyle);
            TextSlider2.top = 100;
            sliderContainer.addChild(TextSlider2);

            valueText = new PIXI.UI.Text("0", sliderTextStyle);
            valueText.top = -20;
            valueText.horizontalAlign = "center";

            slider1 = new PIXI.UI.Slider({
                track: new PIXI.UI.SliceSprite(solidBox, 7),
                handle: new PIXI.UI.SliceSprite(solidBox, 7),
                fill: new PIXI.UI.SliceSprite(solidBox, 7),
                value: 50,
                minValue: -1000,
                maxValue: 100,
                onValueChanging: function (val) {
                    valueText.value = val + "";
                }
            });

            slider1.top = 150;
            slider1.handle.width = 30;
            slider1.handle.height = 30;
            slider1.handle.tint = 0xb7bcae;
            slider1.fill.tint = 0xb4f154;
            slider1.track.tint = 0xe4e7de;

            slider1.handle.addChild(valueText);
            sliderContainer.addChild(slider1);





            leaderboardContainer = new PIXI.UI.Container("80%", "100%");
            leaderboardContainer.anchorRight = 0;
            wrapper.addChild(leaderboardContainer);

            //basic slider
            TextLeaderboard = new PIXI.UI.Text("Sortable Lists, ScrollingContainers (Drag and MouseScroll, restricted to Y), Draggable items (restricted to X), and Tweens", sliderTextStyle);
            TextLeaderboard.top = 0;
            leaderboardContainer.addChild(TextLeaderboard);


            container = new PIXI.UI.SliceSprite(whiteBG, 5);
            container.height = 580;
            container.width = '95%';
            container.top = "50%"
            //container.maxWidth = 1200;
            container.minWidth = 550;
            container.maxHeight = "100%";
            container.anchorLeft = 0;
            container.rotation = 3;
            container.scale = 0;
            container.pivot = 0.5;
            leaderboardContainer.addChild(container);

            for (var i = 0; i < 2; i++) {
                var section = new PIXI.UI.Container();
                if (i == 1) section.anchorRight = 0;
                section.anchorBottom = 0;
                section.anchorTop = 0;
                section.width = "50%";
                container.addChild(section);

                var teamContainer = new PIXI.UI.SliceSprite(innerBG, 5);
                teamContainer.anchorTop = teamContainer.anchorBottom = 6;
                teamContainer.anchorRight = i == 1 ? 6 : 3;
                teamContainer.anchorLeft = i == 1 ? 3 : 6;
                teamContainer.tint = i == 1 ? 0x3b0000 : 0x252934;
                section.addChild(teamContainer);

                var headlineStyle = { fill: i == 1 ? ['#ff6c6c', '#ff3838'] : ['#5ebef2', '#26aff1'], fontSize: 18, fontFamily: 'Calibri', fontWeight: 'bold' };
                var HeadlinePlayer = new PIXI.UI.Text("PLAYER", headlineStyle);
                var HeadlineScore = new PIXI.UI.Text("SCORE", headlineStyle);
                var HeadlineKDA = new PIXI.UI.Text("K/D/A", headlineStyle);
                var HeadlinePing = new PIXI.UI.Text("PING", headlineStyle);
                HeadlinePlayer.anchorTop = HeadlineScore.anchorTop = HeadlineKDA.anchorTop = HeadlinePing.anchorTop = 19;
                HeadlinePlayer.left = 13;
                HeadlineScore.right = "55%";
                HeadlineKDA.right = "33%";
                HeadlinePing.anchorRight = "2%";

                var headlineStroke = new PIXI.UI.SliceSprite(lineSprite, 2, true, false);
                headlineStroke.tint = i == 1 ? 0xff6c6c : 0x76c3f2;
                headlineStroke.anchorLeft = headlineStroke.anchorRight = 8;
                headlineStroke.anchorTop = 37;

                var sortableList = new PIXI.UI.SortableList(true, 0.4, PIXI.UI.Ease.Power2.easeOut);
                sortableList.height = "100%";
                sortableList.width = "100%";
                sortableList.droppable = true;
                sortableList.dropGroup = "player";

                var ScrollingContainer = new PIXI.UI.ScrollingContainer({ scrollX: false, scrollY: true });
                ScrollingContainer.anchorLeft = ScrollingContainer.anchorRight = ScrollingContainer.anchorBottom = 0;
                ScrollingContainer.anchorTop = 40;
                ScrollingContainer.dragThreshold = 5;
                ScrollingContainer.dragRestrictAxis = "y";
                ScrollingContainer.addChild(sortableList);
                ScrollingContainer.on("dragStart", function () {
                    console.log("start drag scroll");
                });

                ScrollingContainer.on("dragEnd", function () {
                    console.log("end drag scroll");
                });

                ScrollBar = new PIXI.UI.ScrollBar({
                    track: new PIXI.UI.SliceSprite(innerBG, 4),
                    handle: new PIXI.UI.SliceSprite(innerBG, 4),
                    vertical: true,
                    scrollingContainer: ScrollingContainer,
                    autohide: true,
                });
                ScrollBar.track.width = ScrollBar.handle.width = 8;
                ScrollBar.track.pivotX = -0.5;
                ScrollBar.anchorTop = 38;
                ScrollBar.anchorBottom = 1;
                ScrollBar.anchorRight = 0;
                ScrollBar.track.tint = 0x222222;
                ScrollBar.track.blendMode = 0;


                var textStyle = { fill: ['#ffffff', '#ededed'], fontSize: 14, fontFamily: 'Calibri', fontWeight: 'bold' };
                for (var p = 0; p < playersArr.length; p++) {
                    (function () {
                        var player = playersArr[p];
                        var playerItem = new PIXI.UI.Container();
                        playerItem.draggable = true;
                        playerItem.dragGroup = "player";
                        playerItem.dragThreshold = 5;
                        playerItem.dragRestrictAxis = "x"
                        playerItem.dragContainer = dragContainer;
                        playerItem.x = playerItem.y = 0;
                        playerItem.width = "100%";
                        playerItem.height = 40;


                        var playerItemUnderline = new PIXI.UI.SliceSprite(lineSprite, 2, true, false);
                        playerItemUnderline.anchorLeft = playerItemUnderline.anchorRight = 10;
                        playerItemUnderline.anchorBottom = 0;
                        playerItemUnderline.alpha = 0.7;


                        var playerItemBG = new PIXI.UI.Sprite(horizontalGradient);
                        playerItemBG.anchorLeft = playerItemBG.anchorRight = 10;
                        playerItemBG.anchorTop = 0;
                        playerItemBG.anchorBottom = 3;
                        playerItemBG.blendMode = 1;

                        var Name = new PIXI.UI.Text(player.name, textStyle);
                        var Score = new PIXI.UI.Text(player.score, textStyle);
                        var KDA = new PIXI.UI.Text(player.kills + "/" + player.deaths + "/" + player.assist, textStyle);
                        var Ping = new PIXI.UI.Text(player.ping, textStyle);

                        Name.anchorTop = Score.anchorTop = KDA.anchorTop = Ping.anchorTop = 6;
                        Name.left = 13;
                        Score.right = "55%";
                        KDA.right = "33%";
                        Ping.anchorRight = "2%";

                        playerItem.addChild(playerItemBG, playerItemUnderline, Name, Score, KDA, Ping);
                        playerItem.altering = function (alt) {
                            if (alt) PIXI.UI.Tween.to(playerItemBG, 0.3, { alpha: 0 });
                            else PIXI.UI.Tween.to(playerItemBG, 0.3, { alpha: 0.09 });
                        };


                        sortableList.addChild(playerItem,
                            function () {
                                return player.score;
                            },
                            function () {
                                return player.kills;
                            });
                    })();
                }

                teamContainer.addChild(HeadlinePlayer, HeadlineScore, HeadlineKDA, HeadlinePing, headlineStroke, ScrollingContainer, ScrollBar);


            }
            uiStage.addChild(dragContainer);



            var y = 10;
            for (i = 0; i <= 18; i++) {
                var tween = window["tween" + i] = new PIXI.UI.Sprite(whiteBG);
                tween.anchorTop = y;
                tween.anchorRight = 100;
                y += 20;
                uiStage.addChild(tween);
            }



            setTimeout(function () {
                PIXI.UI.Tween.to(tween0, 2, { anchorRight: 5 });
                PIXI.UI.Tween.to(tween1, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power1.easeIn);
                PIXI.UI.Tween.to(tween2, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power1.easeOut);
                PIXI.UI.Tween.to(tween3, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power1.easeInOut);
                PIXI.UI.Tween.to(tween4, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power2.easeInOut);
                PIXI.UI.Tween.to(tween5, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power3.easeInOut);
                PIXI.UI.Tween.to(tween6, 2, { anchorRight: 5 }, PIXI.UI.Ease.Power4.easeInOut);
                PIXI.UI.Tween.to(tween7, 2, { anchorRight: 5 }, PIXI.UI.Ease.Bounce.BounceIn);
                PIXI.UI.Tween.to(tween8, 2, { anchorRight: 5 }, PIXI.UI.Ease.Bounce.BounceOut);
                PIXI.UI.Tween.to(tween9, 2, { anchorRight: 5 }, PIXI.UI.Ease.Bounce.BounceInOut);
                PIXI.UI.Tween.to(tween10, 2, { anchorRight: 5 }, PIXI.UI.Ease.Expo.ExpoIn);
                PIXI.UI.Tween.to(tween11, 2, { anchorRight: 5 }, PIXI.UI.Ease.Expo.ExpoOut);
                PIXI.UI.Tween.to(tween12, 2, { anchorRight: 5 }, PIXI.UI.Ease.Expo.ExpoInOut);
                PIXI.UI.Tween.to(tween13, 2, { anchorRight: 5 }, PIXI.UI.Ease.Circ.CircIn);
                PIXI.UI.Tween.to(tween14, 2, { anchorRight: 5 }, PIXI.UI.Ease.Circ.CircOut);
                PIXI.UI.Tween.to(tween15, 2, { anchorRight: 5 }, PIXI.UI.Ease.Circ.CircInOut);
                PIXI.UI.Tween.to(tween16, 2, { anchorRight: 5 }, PIXI.UI.Ease.Sine.SineIn);
                PIXI.UI.Tween.to(tween17, 2, { anchorRight: 5 }, PIXI.UI.Ease.Sine.SineOut);
                PIXI.UI.Tween.to(tween18, 2, { anchorRight: 5 }, PIXI.UI.Ease.Sine.SineInOut);


                PIXI.UI.Tween.to(container, 1.3, { scaleX: 1, rotation: 0 }, PIXI.UI.Ease.Sine.SineOut);
                PIXI.UI.Tween.to(container, 1.25, { scaleY: 1 }, PIXI.UI.Ease.Sine.SineIn);
            }, 100);
            Update(performance.now());
        }


        PIXI.UI.Ticker.disabled = true;
        function Update(time) {
            PIXI.UI.Ticker.update(time);
            renderer.render(stage);
            requestAnimationFrame(Update);
        }

    </script>
</body>
</html>
